<template>
	<view>
		<image :src="getValue(userInfo,'avatar')?userInfo.avatar:'../../static/index/serviceTitleBj.png'" class="avatar"
			@click="upAvatar"></image>
		<view class="listBox">
			<view class="flex list">
				<view>昵称</view>
				<view class="flex rightList">
					<input type="text" placeholder="昵称(限三个字)" class="ipt" v-model="userInfo.realname" />
					<image src="../../static/info/ashArrows.png" class="ashArrows"></image>
				</view>
			</view>
			<view class="flex list">
				<view>用户名</view>
				<view class="flex rightList">
					<input type="text" placeholder="用户名" class="ipt" disabled v-model="userInfo.username" />
					<image src="../../static/info/ashArrows.png" class="ashArrows"></image>
				</view>
			</view>
		</view>
		<view class="applyBtn" @click="modifyUserPaymentCode">确定</view>
	</view>
</template>

<script>
	import {
		modifyUserPaymentCode
	} from '../../common/api.js'
	import UploadImageS from '@/utils/upload_image.js'
	import {
		getValue
	} from "../../utils/me";
	export default {
		data() {
			return {
				getValue,
				userInfo: {},
			}
		},
		onShow() {
			// #ifdef MP-WEIXIN
			this.userInfo = uni.getStorageSync('userInfo')
			// #endif
		},
		methods: {
			upAvatar() {
				var that = this;
				uni.chooseImage({
					count: 1, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album', 'camera'], //从相册选择
					success: function(res) {
						const tempFilePaths = res.tempFilePaths;
						// 开始上传
						new UploadImageS(tempFilePaths, {
							complete: function(res) {
								that.userInfo.avatar = res[0].img_url
							},
						})
					},
					fail: function(err) {
						console.log(err)
					}
				});
			},
			modifyUserPaymentCode() {
				if (this.userInfo.realname && this.userInfo.realname.length > 4) {
					// 如果this.userInfo.realname存在且长度大于4个字符，则显示提示框
					uni.showToast({
						title: '昵称格式不合格',
						icon: 'none'
					})
					return
				}
				modifyUserPaymentCode({
					nickname: this.userInfo.realname,
					userCover: this.userInfo.avatar,
					userId: this.userInfo.id
				}).then(res => {
					this.$toast(res.message)
					if (res.success) {
						uni.setStorageSync('userInfo', res.result);
					}
					setTimeout(() => {
						uni.navigateBack({
							delta: 1
						})
					}, 1000)
				})
			}
		}
	}
</script>

<style scoped>
	.ipt {
		text-align: right;
	}

	.applyBtn {
		position: absolute;
		bottom: 108rpx;
		left: 80rpx;
		width: 586rpx;
		height: 86rpx;
		border-radius: 62rpx;
		background: linear-gradient(90deg, #ffc114 0%, #fdba00 100%);
		font-size: 32rpx;
		font-weight: 700;
		line-height: 86rpx;
		text-align: center;
		color: #ffffff;
	}

	.rightList {
		align-items: center;
	}

	.avatar {
		width: 296rpx;
		height: 296rpx;
		margin: 36rpx 232rpx;
		border-radius: 50%;
	}

	.ashArrows {
		width: 44.42rpx;
		height: 51.48rpx;
	}

	.list {
		justify-content: space-between;
		align-items: center;
		height: 102rpx;
		border-bottom: 2rpx solid #f6f6f6;
		color: #333333;
		font-size: 30rpx;
		font-weight: 400;
	}

	.list:nth-child(2) {
		border-bottom: none;
	}

	.listBox {
		width: 614rpx;
		height: 204rpx;
		border-radius: 28rpx;
		opacity: 1;
		background: #ffffff;
		padding: 0 40rpx;
		margin: 24rpx 28rpx;
	}
</style>
<style>
	page {
		background: #f5f5f5;
	}
</style>